import React, {Component} from 'react';
import {Form, Input, Button, message, Spin, Checkbox} from 'antd'
import {UserOutlined, LockOutlined, EyeTwoTone, EyeInvisibleOutlined} from '@ant-design/icons'
import './index.less'
import Logo from './images/logo.png'
import axios from '@/components/service/request';
import {getStorage, setStorage} from '@/utils/localstorage'
import FooterPage from '@components/layout/footerPage'

/**
 * 登录路由组件
 */
class Login extends Component {

    state = {
        loading: false,
        rememberMe: false
    }

    componentDidMount() {
        // 检查是否有保存的账号密码
        const savedAccount = localStorage.getItem('savedAccount')
        const savedPassword = localStorage.getItem('savedPassword')
        if (savedAccount && savedPassword) {
            this.setState({ rememberMe: true })
            this.formRef.current.setFieldsValue({
                account: savedAccount,
                password: savedPassword
            })
        }
    }

    formRef = React.createRef()

    onFinish = (values) => {
        this.setState({ loading: true })
        
        // 记住密码功能
        if (values.remember) {
            localStorage.setItem('savedAccount', values.account)
            localStorage.setItem('savedPassword', values.password)
        } else {
            localStorage.removeItem('savedAccount')
            localStorage.removeItem('savedPassword')
        }

        axios.post("/login", {
            userAccount: values.account, 
            password: values.password
        })
        .then(res => {
            if (res.code === 200) {
                message.success('登录成功！')
                setStorage("user", res.data)
                setStorage("token", res.data.token)
                let uri = getStorage('current_uri')
                window.location.href = uri || '/'
            } else {
                message.error(res.msg || '登录失败，请检查账号密码')
            }
        })
        .catch(err => {
            message.error("服务器连接失败，请稍后重试")
        })
        .finally(() => {
            this.setState({ loading: false })
        })
    }

    render() {
        return (
            <div className={'login'}>
                <header className={'login-header'}>
                    <div className="logo-container">
                        <img src={Logo} alt="logo"/>
                        <h1>华理附院医学数据平台</h1>
                    </div>
                </header>
                
                <main className={'login-content'}>
                    <div className="login-box">
                        <h2>用户登录</h2>
                        <Spin spinning={this.state.loading}>
                            <Form
                                ref={this.formRef}
                                name="login"
                                className="login-form"
                                initialValues={{remember: false}}
                                onFinish={this.onFinish}
                            >
                                <Form.Item
                                    name="account"
                                    rules={[
                                        {required: true, message: '请输入用户名!'},
                                        {min: 3, message: '用户名至少3个字符'}
                                    ]}
                                >
                                    <Input 
                                        prefix={<UserOutlined className="site-form-item-icon"/>} 
                                        placeholder="请输入用户名"
                                        size="large"
                                    />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[
                                        {required: true, message: '请输入密码!'},
                                        {min: 6, message: '密码至少6个字符'}
                                    ]}
                                >
                                    <Input.Password
                                        prefix={<LockOutlined className="site-form-item-icon"/>}
                                        placeholder="请输入密码"
                                        size="large"
                                        iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                                    />
                                </Form.Item>

                                <Form.Item>
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox>记住密码</Checkbox>
                                    </Form.Item>
                                </Form.Item>

                                <Form.Item>
                                    <Button type="primary" htmlType="submit" className="login-form-button" size="large">
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Spin>
                    </div>
                </main>
                <FooterPage/>
            </div>
        );
    }
}

export default Login;
